<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
</head>

<body>
    <div data-ng-app="" data-ng-init="quantity=1;cost=5;
                                      firstName='John';lastName='Doe';
                                      person={firstName:'John',lastName:'Doe'};
                                      points=[1,15,19,2,40]">
        <!-- 表达式的数字运算 -->
        <p>
            <span>init number: quantity = 1; cost = 5;</span><br />
            <span>angular expression calulate total = quantity * cost;</span><br />
            <span>total({ {} } expression)：<span>{{ quantity * cost }}</span></span><br />
            <span>total(ng-bind expression)：<span data-ng-bind="quantity * cost"></span></span><br />
        </p>

        <!-- 表达式字符串运算 -->
        <p>
            <span>init string: firstName = 'John'; lastName = 'Doe';</span><br />
            <span>angular expression calulate name = firstName + ' ' + lastName;</span><br />
            <span>name({ {} } expression)：<span>{{ firstName + ' ' + lastName }}</span></span><br />
            <span>name(ng-bind expression)：<span data-ng-bind="firstName + ' ' + lastName"></span></span><br />
        </p>
        <!-- 表达式对象运算 -->
        <p>
            <span>init object: person = {firstName: 'John', lastName: 'Doe'};</span><br />
            <span>angular expression calulate person name = person.firstName + ' ' + person.lastName;</span><br />
            <span>person name({ {} } expression)：<span>{{ person.firstName + ' ' + person.lastName }}</span></span><br />
            <span>person name(ng-bind expression)：<span data-ng-bind="person.firstName + ' ' + person.lastName"></span></span><br />
        </p>
        <!-- 表达式数组运算 -->
        <p>
            <span>init array: points = [1, 15, 19, 2, 40];</span><br />
            <span>angular expression calulate point[3] = point[3];</span><br />
            <span>points[3]({ {} } expression)：<span>{{ points[3] }}</span></span><br />
            <span>points[3](ng-bind expression)：<span data-ng-bind="points[3]"></span></span><br />
        </p>

    </div>
    <script src="../node_modules/angular/angular.min.js"></script>
</body>

</html>
